<script setup>
import { ref } from 'vue'

// 时间范围
const dateRange = ref([])

// 统计卡片数据
const summaryData = ref({
  totalUsers: 12580,
  newUsers: 256,
  totalOrders: 3580,
  totalRevenue: 2568900
})
</script>

<template>
  <div class="statistics-container">
    <!-- 时间筛选 -->
    <t-card class="filter-card">
      <t-row justify="space-between" align="middle">
        <t-col>
          <t-space>
            <span>时间范围：</span>
            <t-date-range-picker
              v-model="dateRange"
              placeholder="请选择日期范围"
              clearable
            />
            <t-button theme="primary">查询</t-button>
          </t-space>
        </t-col>
        <t-col>
          <t-space>
            <t-button theme="default">导出报表</t-button>
          </t-space>
        </t-col>
      </t-row>
    </t-card>

    <!-- 统计概览 -->
    <t-row :gutter="[16, 16]">
      <t-col :span="6">
        <t-card class="summary-card">
          <div class="summary-item">
            <div class="summary-title">用户总数</div>
            <div class="summary-value">{{ summaryData.totalUsers.toLocaleString() }}</div>
            <div class="summary-trend">
              <t-icon name="arrow-up" style="color: #52c41a" />
              <span style="color: #52c41a">12.5%</span>
            </div>
          </div>
        </t-card>
      </t-col>
      <t-col :span="6">
        <t-card class="summary-card">
          <div class="summary-item">
            <div class="summary-title">新增用户</div>
            <div class="summary-value">{{ summaryData.newUsers.toLocaleString() }}</div>
            <div class="summary-trend">
              <t-icon name="arrow-up" style="color: #52c41a" />
              <span style="color: #52c41a">8.2%</span>
            </div>
          </div>
        </t-card>
      </t-col>
      <t-col :span="6">
        <t-card class="summary-card">
          <div class="summary-item">
            <div class="summary-title">订单总数</div>
            <div class="summary-value">{{ summaryData.totalOrders.toLocaleString() }}</div>
            <div class="summary-trend">
              <t-icon name="arrow-down" style="color: #f5222d" />
              <span style="color: #f5222d">3.1%</span>
            </div>
          </div>
        </t-card>
      </t-col>
      <t-col :span="6">
        <t-card class="summary-card">
          <div class="summary-item">
            <div class="summary-title">总收入</div>
            <div class="summary-value">¥{{ (summaryData.totalRevenue / 10000).toFixed(2) }}万</div>
            <div class="summary-trend">
              <t-icon name="arrow-up" style="color: #52c41a" />
              <span style="color: #52c41a">15.8%</span>
            </div>
          </div>
        </t-card>
      </t-col>
    </t-row>

    <!-- 图表区域 -->
    <t-row :gutter="[16, 16]" style="margin-top: 16px">
      <t-col :span="12">
        <t-card title="用户增长趋势">
          <div class="chart-placeholder">
            <p>用户增长趋势图表</p>
            <p style="color: #999; font-size: 14px">（需要集成 ECharts 后显示）</p>
          </div>
        </t-card>
      </t-col>
      <t-col :span="12">
        <t-card title="订单统计">
          <div class="chart-placeholder">
            <p>订单统计图表</p>
            <p style="color: #999; font-size: 14px">（需要集成 ECharts 后显示）</p>
          </div>
        </t-card>
      </t-col>
    </t-row>

    <t-row :gutter="[16, 16]" style="margin-top: 16px">
      <t-col :span="8">
        <t-card title="用户性别分布">
          <div class="chart-placeholder">
            <p>性别分布饼图</p>
            <p style="color: #999; font-size: 14px">（需要集成 ECharts 后显示）</p>
          </div>
        </t-card>
      </t-col>
      <t-col :span="8">
        <t-card title="用户年龄分布">
          <div class="chart-placeholder">
            <p>年龄分布图表</p>
            <p style="color: #999; font-size: 14px">（需要集成 ECharts 后显示）</p>
          </div>
        </t-card>
      </t-col>
      <t-col :span="8">
        <t-card title="内容分类统计">
          <div class="chart-placeholder">
            <p>分类统计图表</p>
            <p style="color: #999; font-size: 14px">（需要集成 ECharts 后显示）</p>
          </div>
        </t-card>
      </t-col>
    </t-row>
  </div>
</template>

<style scoped>
.statistics-container {
  height: 100%;
}

.filter-card {
  margin-bottom: 16px;
}

.summary-card {
  height: 120px;
}

.summary-item {
  text-align: center;
}

.summary-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
}

.summary-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.summary-trend {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style> 